<template>
  <div>
    <detail-banner :listObject="listObject"></detail-banner>
    <detail-header></detail-header>
    <detail-recomment></detail-recomment>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
    <detail-footer></detail-footer>
  </div>
</template>

<script>
import axios from 'axios'
import DetailBanner from '@/components/detailComponents/Banner'
import DetailHeader from '@/components/detailComponents/Header'
import DetailList from '@/components/detailComponents/List'
import DetailRecomment from '@/components/detailComponents/Recomment'
import DetailFooter from '@/components/homeComponents/Footer'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
    DetailRecomment,
    DetailFooter
  },
  data() {
    return {
      listObject: {},
      list: []
    }
  },
  created() {
    // this.getDetailInfo()
    axios.get('/api/detail.json').then(res => {
      res = res.data
      if (res.ret && res.data) {
        this.list = res.data.categoryList
        console.log(this.list)
      }
    })
  },
  activated() {
    this.getDetailInfo()
  },
  methods: {
    // 获取路由传参数据
    getDetailInfo() {
      this.listObject = this.$route.query
    }
  }
}
</script>
<style scoped lang="stylus">
.content {
  // height: 50rem;
}
</style>
